<template>
	<el-card>
		<el-row>
			<el-col :span="1">
				<div style="" />
			</el-col>
			<el-col :span="22">
				<el-card>
					<h2 style="text-align: left; font-family: Helvetica Neue; color: darksalmon; ">米面豆类：</h2>
					<el-row v-for="(row,index) in sliceList(this.Data,4)" :key="index">
						<el-col :span="6" v-for="(item,i) in row" :key="i">
							<el-card class="foodcard" shadow="hover" @click="toDetilPage(item.id)">
								<el-image :src="this.imgUrl+item.img" style="height: 150px;" />
								<div style="padding: 14px">
									<span>{{item.name}}</span>
									<div class="bottom">
										<el-button type="text" class="button">具体介绍</el-button>
									</div>
								</div>
							</el-card>
						</el-col>
					</el-row>
					
					<div style="margin: 10px 0">
						<el-pagination v-model:currentPage="pageNum" :page-size="pageSize" :page-sizes="[4, 8, 12]" :total="total"
							layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
							@current-change="handleCurrentChange">
						</el-pagination>
					</div>
					
				</el-card>
			</el-col>
			<el-col :span="1">
				<div style="" />
			</el-col>
		</el-row>
		
		
		
		
		
	</el-card>




</template>

<script>
	export default {
		name: "WheatenType",
		data() {
			return {
				imgUrl: 'http://localhost:8080/img/',
				Data: [],
				pageNum: 1,
				pageSize: 8,
				total: 0,
				searchPARAM: {
					id: '',
					name: '',
					type: '',
					content: '',
					restaurantName: '',
					restaurantAddress: '',
					img: ''
				},

			}
		},

		

		created() {
			this.load();
			this.loading = true;
			setTimeout(() => {
				//设置延迟执行
				this.loading = false;
			}, 500);
		},
		
		
		computed: {
			sliceList() {
				return function(data, count) {
					if (data != undefined) {
						let index = 0;
						let arrTemp = [];
						for (let i = 0; i < data.length; i++) {
							index = parseInt(i / count);
							if (arrTemp.length <= index) {
								arrTemp.push([]);
							}
							arrTemp[index].push(data[i])
						}
						return arrTemp
					}
				}
			}
		},
		
		
		methods: {
			
			
			toDetilPage(food) {
				this.$router.push({
					path: '/detailpage',
					query: {
						id: food
					}
				})
			},
			
			
			
			load() {
				this.searchPARAM.type="米面豆类";
				this.$api.post("/food/page",{
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					searchPARAM: this.searchPARAM
				}).then((res) => {

					this.Data = res.data.data.records;
					this.total = res.data.data.total;
					this.loading = false;
				});

			},

			handleSizeChange(pageSize) {
				//改变每页个数
				this.pageSize = pageSize;
				this.load();
			},
			handleCurrentChange(pageNum) {
				//改变页码
				this.currentPage = pageNum;
				this.load();
			},

		}
	}
</script>

<style>
	.foodcard {
		margin: 10px;
		height: 250px;
	}
	
	.foodcard:hover {
		margin: 0px;
		height: 250px;
	}
</style>
